<template>
  <div class="tiku-container">
    <div class="app">
      <el-card>
        <el-row
          style="text-align: right; marginright: 31px; marginbottom: 10px"
        >
          <el-col
<<<<<<< HEAD
            ><el-button
              type="success"
              size="small"
              @click="$router.push('/questions/new')"
=======
            ><el-button type="success" size="small"
>>>>>>> gxd
              ><i class="el-icon-edit"></i>新增试题</el-button
            ></el-col
          >
        </el-row>
<<<<<<< HEAD
        <br />
=======
        <br>
>>>>>>> gxd
        <el-form
          label-width="65px"
          :inline="true"
          size="normal"
          ref="queryData"
          :model="queryData"
        >
          <el-form-item label="学科">
            <el-select
              @focus="xuekeList"
              size="small"
              placeholder="请选择"
              style="width: 202px"
              v-model="queryData.subjectID"
            >
              <el-option
                v-for="(item, index) in this.subject"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
<<<<<<< HEAD
=======

>>>>>>> gxd
          <el-form-item label="目录">
            <el-select
              @focus="muluList"
              placeholder="请选择"
              style="width: 202px"
              v-model="queryData.catalogID"
            >
              <el-option
                v-for="item in this.catalogue"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="标签">
            <el-select
              @focus="biaoqianList"
              placeholder="请选择"
              style="width: 202px"
              v-model="queryData.tags"
            >
              <el-option
                v-for="item in this.label"
                :key="item.id"
                :label="item.tagName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input
              style="width: 200px"
              v-model="queryData.keyword"
            ></el-input>
          </el-form-item>

          <el-form-item label="试题类型">
            <el-select
              placeholder="请选择"
              style="width: 202px"
              v-model="queryData.questionType"
            >
              <el-option label="单选" value=""></el-option>
              <el-option label="多选" value=""></el-option>
              <el-option label="简答" value=""></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="难度">
            <el-select
              placeholder="请选择"
              style="width: 202px"
              v-model="queryData.difficulty"
            >
              <el-option label="简单" value=""></el-option>
              <el-option label="一般" value=""></el-option>
              <el-option label="困难" value=""></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="方向">
            <el-select
              placeholder="请选择"
              style="width: 202px"
              v-model="queryData.direction"
            >
<<<<<<< HEAD
              <!-- <el-option
=======
              <el-option
>>>>>>> gxd
                v-for="item in this.list"
                :key="item.id"
                :label="item.direction"
                :value="item.id"
<<<<<<< HEAD
              ></el-option> -->
              <el-option label="o2o" value="o2o"></el-option>
              <el-option label="外包服务" value="外包服务"></el-option>
              <el-option label="企业服务" value="企业服务"></el-option>
              <el-option label="互联网金融" value="互联网金融"></el-option>
              <el-option label="企业咨询" value="企业咨询"></el-option>
              <el-option label="互联网" value="互联网"></el-option>
              <el-option label="电子商务" value="电子商务"></el-option>
              <el-option label="其他" value="其他"></el-option>
=======
              ></el-option>
              <el-option label="其他" value=""></el-option>
>>>>>>> gxd
            </el-select>
          </el-form-item>

          <el-form-item label="录入人">
            <el-select
              placeholder="请选择"
              style="width: 202px"
              v-model="queryData.creatorID"
            >
              <el-option label="超级管理员" value=""></el-option>
              <el-option label="录入管理员" value=""></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="题目备注">
            <el-input v-model="queryData.remarks"></el-input>
          </el-form-item>

          <el-form-item label="企业简称">
            <el-input v-model="queryData.shortName"></el-input>
          </el-form-item>

          <el-form-item label="城市">
            <el-select
              v-model="queryData.province"
              placeholder="请选择"
              @change="changeCity"
              style="width: 98px; marginright: 10px"
            >
              <el-option
                v-for="item in city"
                :key="item.id"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              v-model="queryData.city"
              placeholder="请选择"
              style="width: 98px"
            >
              <el-option
                v-for="item in capital"
                :key="item.id"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <span style="marginleft: 138px">
            <el-button size="small" @click="eliminatebtn">清除</el-button>
<<<<<<< HEAD
            <el-button size="small" type="primary" @click="initData"
              >搜索</el-button
            >
          </span>
        </el-form>
        <table-change :counts="this.counts"></table-change>
        <!-- 列表组件 -->
        <list :lists="list" @updateList="initData"></list>
        <!-- 分页组件 -->
        <!-- 3个变量：每页数量、页码数、总数 -->
        <!-- 2个事件：页码切换事件、每页数量切换事件-->
        <el-pagination
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryData.page"
          :page-sizes="[3, 4, 5, 10]"
          :page-size="queryData.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
      </el-card>
    </div>
    <!-- 弹窗组件 -->
    <!-- <tableChange :ref="tableChange"></tableChange> -->
=======
            <el-button size="small" type="primary" @click="initData">搜索</el-button>
          </span>
        </el-form>
        <table-change :counts="this.counts"></table-change>
        <list :list="list" @updateList="initData"></list>
      </el-card>
    </div>
>>>>>>> gxd
  </div>
</template>

<script>
<<<<<<< HEAD
import { getListApi, xuekeApi, muluApi, biaoqianApi } from "@/api/questionslist";
=======
import {
  getListApi,
  xuekeApi,
  muluApi,
  biaoqianApi,
} from "@/api/list";
>>>>>>> gxd
import List from "./components/list";
import TableChange from "./components/table-change.vue";
import { provinces, citys } from "@/filters/chengshi.js"; // 导入城市文件夹
export default {
  components: { TableChange, List },
  data() {
    return {
      subject: [], // 学科数据
      catalogue: [], // 目录数据
      label: [], // 标签数据
      list: [], //列表数据
      city: [], // 城市
      capital: [], // 城市
      counts: 0, // 总数
      queryData: {
        page: 1, // 当前页数
        pagesize: 10, // 页尺寸
      },
      formData: {
        subjectID: "", // 学科.
        difficulty: "", // 难度.
        questionType: "", // 试题类型.
        tags: "", // 标签名称.
        province: "", // 企业所在地省份.
        city: "", // 企业所在城市.
        keyword: "", // 关键字.
        remarks: "", // 题目备注.
        shortName: "", // 企业简称.
        direction: "", // 方向.
        creatorID: "", // 录入人.
        catalogID: "", // 目录.
      },
    };
  },
  created() {
    this.initData();
    // 获取城市
    this.getList();
  },
  methods: {
    //  列表功能
    async initData() {
      let { items, counts } = await getListApi(this.queryData);
      // let res = await getListApi(this.queryData);
      // console.log(res);
      console.log(items, counts);
      this.list = items;
      this.counts = counts;
    },
    // 页码变化事件【列表功能】
    handleCurrentChange(val) {
      // val最新页码
      this.queryData.page = val;
      // console.log(val);
      this.initData();
    },
    // 每页数量变化事件【列表功能】
    handleSizeChange(val) {
      // val 最新每页数量
      this.queryData.limit = val;
      // console.log(val);
      this.initData();
    },
    // 学科列表
    async xuekeList() {
      let s = await xuekeApi();
      this.subject = s;
      // console.log(this.subject);
    },
    // 目录列表
    async muluList() {
      let m = await muluApi();
      this.catalogue = m.items;
      console.log(this.catalogue);
      // console.log(this.subject);
    },
    // 标签列表
    async biaoqianList() {
      let label = await biaoqianApi();
      console.log(label);
      this.label = label.items;
      console.log(this.label);
      // console.log(this.subject);
    },
    // 城市
    getList() {
      this.city = provinces();
    },
    appList(city) {
      this.capital = citys(city);
    },
    changeCity(city) {
      this.appList(city);
    },
    // 清除
<<<<<<< HEAD
    eliminatebtn() {
      this.queryData = {
        page: 1, // 当前页数
        pagesize: 10, // 页尺寸
      };
    },
    // 每页数量切换事件【列表功能】
    handleSizeChange(val) {
      // val是最新的每页数量
      console.log(`每页 ${val} 条`);
      this.queryData.pagesize = val;
      this.$nextTick(() => {
        this.initData(this.queryData);
      });
    },
    //页码切换事件【列表功能】
    handleCurrentChange(val) {
      // val是最新的页码
      console.log(`当前页: ${val}`);
      this.queryData.page = val;
      this.initData(this.queryData);
    },
    // initDatas(){
    //   console.log(11);
    // }
=======
    eliminatebtn(){
      this.queryData= {
        page: 1, // 当前页数
        pagesize: 10, // 页尺寸
      }
    }


>>>>>>> gxd
  },
};
</script>

<style>
.el-form-item__label {
  font-size: 13px;
}
.el-input__inner {
  height: 35px;
}
</style>